<template>
  <div class="factory">
    <a-form-model layout="inline">
      <a-form-model-item>
        <a-button icon="plus" size="large" @click="addPerson">
          新增
        </a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-select @select="selectType" style="width: 120px" size="large" placeholder="全部">
          <a-select-option value="study">
            学习墙
          </a-select-option>
          <a-select-option value="office">
            工作墙
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item has-feedback prop="factoryId">
        <a-select @select="selectFactory" style="width: 120px" size="large" placeholder="全部厂区" @focus="getFactoryData">
          <a-select-option v-for="(item,index) in factorys" :key="index" :value="item.value">
            {{item.name}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-input-search
          v-model="searchInput"
          placeholder="输入标题"
          enter-button="搜索"
          size="large"
          allowClear
          @search="search"
        />
      </a-form-model-item>
    </a-form-model>

    <a-table class="tabel" :columns="columns" :data-source="source" bordered rowKey="id" :pagination="false">
      <template slot="qrCode" slot-scope="text,record">
        <img :src="fileUrl(record.qrCode)" width="100" height="100" />
      </template>
      <template slot="codeType" slot-scope="text">
        <span>{{text=='study'?'学习墙':'工作墙'}}</span>
      </template>
      <template slot="action" slot-scope="text,record">
        <div class="u-flex u-row-around">
          <a @click="clickEdit(record)">编辑</a>
          <a @click="clickDel(record)">删除</a>
        </div>
      </template>
    </a-table>

    <a-pagination
      class="pagination"
      v-model="page.pageNum"
      :pageSize.sync="page.pageSize"
      :pageSizeOptions="['5','10','15','20']"
      show-size-changer
      :default-current="1"
      :total="total"
      @change="getQRCodeData"
      @showSizeChange="getQRCodeData"
    />

    <QRCodeFormModal :visible.sync="showForm" :formData.sync="codeForm" @ok="getQRCodeData"></QRCodeFormModal>
  </div>
</template>

<script>
import QRCodeFormModal from '../../components/home/QRCodeFormModal'
import {getQRCodes,delQRCodes,fileUrl,getFactorysByName} from "../../api/index";
import moment from 'moment'
export default {
  name:"QRCode",
  data(){
    return {
      factorys:[],
      factoryId:null,
      showForm:false,
      codeForm:null,
      searchInput:"",
      codeType:null,
      columns:[
        {
          title: '编码',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: '标题',
          dataIndex: 'headline',
          key: 'headline',
        },
        {
          title: '类型',
          dataIndex: 'codeType',
          key: 'codeType',
          scopedSlots: { customRender: 'codeType' },
        },
        {
          title: '厂区',
          dataIndex: 'factoryName',
          key: 'factoryName',
        },
        {
          title: '二维码',
          dataIndex: 'qrCode',
          key: 'qrCode',
          scopedSlots: { customRender: 'qrCode' },
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime',
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      source:[],
      page:{
        pageNum:1,
        pageSize:5
      },
      total:0,

    }
  },
  components:{
    QRCodeFormModal
  },
  created(){
    this.getQRCodeData();
    this.getFactoryData()
  },
  methods:{
    fileUrl,
    getFactoryData(){
      getFactorysByName().then(data =>{
        this.factorys=[];
        data.map(item =>{
          this.factorys.push({
            name:item.name,
            value:item.id
          })
        })
      })
    },
    getQRCodeData(){
      getQRCodes({
        headline:this.searchInput, 
        codeType:this.codeType==null?undefined:this.codeType,
        factoryId:this.factoryId==null?undefined:this.factoryId,
        ...this.page
      }).then(data =>{
        data.records.map(item =>{
          item.createTime=moment(item.createTime).format("YYYY-MM-DD HH:mm:ss");
        });
        this.source=data.records;
        this.total=data.total;
      });
    },
    addPerson(){
      this.showForm=true;
      this.codeForm=null;
    },
    search(){
      this.page.pageNum=1;
      this.getQRCodeData();
    },
    clickEdit(record){
      this.codeForm={
        headline:record.headline,
        id:record.id,
        codeType:record.codeType,
        qrCode:record.qrCode,
        factoryIds:record.factoryId
      };
      this.showForm=true;
    },
    clickDel(record){
      this.$confirm({
        title: '确定删除这条记录?',
        content: '',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk:() =>{ 
          delQRCodes(record.id).then(() =>{
            this.$message.success('删除成功');
            this.getQRCodeData();
          });
          
        }
      });
    },
    selectType(val){
      this.codeType=val;
    },
    selectFactory(val){
      this.factoryId=val;
    }
  }
}
</script>
<style lang="scss" scoped>
.factory{
  height: 100%;
  .tabel{
    height: calc(100% - 100px);
    margin: 10px;
    overflow-y: scroll;
  }
  .pagination{
    height: 60px;
  }
}
</style>
